<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>jquery i18</title>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.i18n.properties.js"></script>
	<style>
		html {
			padding-left: 200px;
		}
	</style>
</head>

<body>
	<select name="lang" id="lang">
		<option value="en_US">English</option>
		<option value="zh_CN">中文</option>
		<option value="lo-LA">ລາວ</option>
	</select>

	<p class="pppp">dasdsadasdsadasd</p>
</body>

<script>

	//  zh_CN, en_US, lo-LA

	function seleLang(type) {
		jQuery.i18n.properties({
			name: 'language',
			path: 'language',
			mode: 'both',
			language: type,
			async: true,
			cache: true,
			encoding: 'utf-8',
			callback: function () {
				$('.pppp').html($.i18n.prop('msg_hello'));
			}
		});
	}

	$(document).ready(function () {
		var language = jQuery.i18n.normaliseLanguageCode({}); //获取浏览器的语言
		if (/zh/.test(language)) {
			seleLang('zh_CN');
			$('#lang').val('zh_CN');
		} else {
			seleLang(language);
		}

		$('#lang').on('change', function () {
			seleLang($('#lang').val());
		})

	})

	// jQuery.i18n.properties
	// https://blog.csdn.net/m0_37566424/article/details/79070218
</script>

</html>